<template>
    <div>
        <div v-if="!isShow"><h1>无收藏</h1></div>
        <div class="fresh_mid" v-else> 
            <ul>
              <li v-for="(product) in productList" :key="product.id" class="product-item">
                <div class="name">
                  <router-link :to="{name: 'productDetail' , query: {id:product.id}}">
                    {{product.name}}
                  </router-link>
                </div>
                <div class="price">
                  <font>￥<span>{{product.price}}</span></font> &nbsp; 26R
                </div>
                <div class="img">
                  <router-link :to="{name:'productDetail' , query: {id:product.id}}">
                    <img
                      :src="`http://192.168.1.146:8088/${product.fileName}`"
                      width="185"
                      height="155"
                    />
                  </router-link>
                </div>
                <span class="delete" @click="deleteCollect(product.id)">×</span>
              </li>
            </ul>
          </div>
    </div>
</template>

<script>
export default {
    name: "manageNews",
    data() {
    return {
      productList:{},
    isShow:false,
    user:null,
    };
  },  methods: {
    getCollectByUserId(){
       let token= sessionStorage.getItem("token") || null;
      
        if (token) {
          const userData = sessionStorage.getItem("user");
            if(userData!=null){
                this.user=JSON.parse(userData);
            }
        }
        if(this.user==null){
          return ;
        }
        this.$axios({
            url:"api/product/getCollects",
            data:{
                id:this.user.id
            },
            method:"post"
        }) .then((rs) => {
          console.log(rs);
          if(rs.data.result!="无收藏"){
              this.productList=rs.data.result;
              this.isShow=true;
          }else{
            this.productList=[];
            this.isShow=false;
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
        deleteCollect(id){
            if(!confirm("是否确认删除")){
                    return ;
            }
            this.$axios({
            url:"api/product/deleteCollect",
            data:{
                productId:id,
                userId:this.user.id,
            },
            method:"post"
        }) .then((rs) => {
            if(rs.data.result=="删除成功"){
                this.getCollectByUserId();
            }
        })
        .catch((error) => {
          console.error(error);
        });
        }
  },created(){
    this.getCollectByUserId();
  }
}
</script>

<style>
.product-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px; /* 添加间距 */
  position: relative; /* 为绝对定位的删除按钮提供定位上下文 */
}

.delete {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 18px; /* 设置叉叉的大小 */
  cursor: pointer;
  color: #ff0000; /* 设置叉叉的颜色 */
}

.delete:hover {
  color: #cc0000; /* 鼠标悬停时的颜色变化 */
}
</style>